{% extends 'base.html' %}

{% block title %}
   我的网站|首页
{% endblock %}

{% block header_extends %}
    <link rel="stylesheet" href="/static/index.css">
    <script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
{% endblock %}

{% block nav_home_active %}active{% endblock %}

{% block content %}
    <h2 class="home-content">欢迎访问我的网站</h2>
     <!-- 图表容器 DOM -->
    <div id="container" style="width: 600px; height:400px;"></div>
    <div class="hot-data">
     <!-- 24小时内热门博客 -->
        <h3>今日热门点击</h3>
        <ul>
            {% for hot in hot_today_data %}
                <li> <a href="{% url 'blog_detail' hot.blog.pk %}">{{ hot.blog.title }}</a>({{ hot.viewed_num }}) </li>
            {% empty %}
            <li>今天没有热门博客</li>
            {% endfor %}
        </ul>
    </div>

    <div class="hot-data">
        <!-- 昨天内热门博客 -->
        <h3>昨日热门点击</h3>
        <ul>
            {% for hot in hot_yesterday_data %}
                <li> <a href="{% url 'blog_detail' hot.blog.pk %}">{{ hot.blog.title }}</a>({{ hot.viewed_num }}) </li>
            {% empty %}
            <li>昨天没有热门博客</li>
            {% endfor %}
        </ul>
    </div>

    <div class="hot-data">
        <!-- 七天热门博客 -->
        <h3>七天热门点击</h3>
        <ul>
            {% for blog,viewed_sum in hot_7_dict.items %}
                <li> <a href="{% url 'blog_detail' blog.pk %}">{{ blog.title }}</a>({{ viewed_sum }})
            {% empty %}
                七天没有热门博客
            {% endfor %}
        </ul>
    </div>
    <script>
        // 图表配置
        var options = {
            chart: {
                type: 'line'         //指定图表的类型，默认是折线图（line）
            },
            title: { text: null },// 标题
            xAxis: {
                categories: {{ date_list|safe }},
                tickmarkPlacement:'on',
                title:{text:'前七天的阅读量变化'},

            },  // x 轴分类,safe对某个变量关闭自动转义,''消除

            yAxis: {
                title: { text: null },                // y 轴标题
                labels:{ enabled: false},
                gridLineDashStyle:'Dash',
            },
            series: [{                                  // 数据列
                name: '按日期的阅读量',                  // 数据列名
                data: {{ viewed_nums }}                 // 数据
            }],
            plotOptions:{
                line:{
                    dataLabels:{
                        enabled: true
                    }
                }
            },
            legend: { enabled: false },
            credits:{ enabled: false },
        };
        // 图表初始化函数
        var chart = Highcharts.chart('container', options);
    </script>

{% endblock %}
